<template>
  <div class="wrapper">
    <div
      class="block"
      :class="isMove ? 'animation' : ''"
      @click="handleMoveClick"
    ></div>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity';
export default {
  setup() {
    const { item } = [1, 2, 3];
    const isMove = ref(false);
    const handleMoveClick = () => {
      console.log('isMove: ', isMove);
      isMove.value = true;
      setTimeout(() => {
        isMove.value = false;
      }, 4000);
    };

    return { item, isMove, handleMoveClick };
  },
};
</script>
<style lang="scss" scoped>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';
.wrapper {
  overflow-y: auto;
  @include fix-content;
  background: $darkBgColor;
  .block {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-color: black;
  }
  .animation {
    -webkit-animation: animation 4s infinite linear;
    animation: theanimation 4s infinite linear;
  }
}
@keyframes theanimation {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 0 0;
    transform-origin: 100% 0;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 0 0;
    transform-origin: 100% 0;
    opacity: 1;
  }
}
// @-webkit-keyframes theanimation {
//   0% {
//     -webkit-transform: scale(1);
//     transform: scale(1);
//     -webkit-transform-origin: 100% 0;
//     transform-origin: 100% 0;
//     opacity: 1;
//   }
//   100% {
//     -webkit-transform: scale(0);
//     transform: scale(0);
//     -webkit-transform-origin: 100% 0;
//     transform-origin: 100% 0;
//     opacity: 1;
//   }
// }
</style>